<template>
  <div id="amap-container">
    <el-autocomplete
      id="search-input"
      v-model="defaultValue"
      class="input-with"
      placeholder="请输入详细位置地址"
      clearable
      :trigger-on-focus="false"
      style="width: 100%"
      @clear="handelclearInput"
      :fetch-suggestions="querySearch"
      @select="selectHandler"
    >
      <template slot-scope="{ item }">
        <span style="float: left">{{ item.value }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
      </template>
    </el-autocomplete>
    <div id="searchResultPanel"/>
    <div id="custom-amap"/>
  </div>
</template>

<script>
import { search } from '../../../src/api/system/aMap'

const AMap = window.AMap
export default {
  name: 'AMap',
  props: {
    defaultValue: {
      type: String,
      default: ''
    },
    lng: {
      type: String
    },
    lat: {
      type: String
    }
  },
  data() {
    return {
      defaultCity: '北京',
      // 地图对象
      map: null,
      // 定位默认地址 | 搜索后选择的地址
      formattedAddress: null,
      // 检索函数对象
      placeSearch: null,
      // 地图标记
      marker: '',
      // 地址解析（正向）
      geocoder: '',
      searchValue: ''
    }
  },
  mounted() {
    // 初始化地图页面
    this.initMap()
    this.setDefaultLocation()
  },
  beforeDestroy() {
    // 销毁地图
    this.map.destroy()
  },
  methods: {
    setDefaultLocation() {
      const location = { ...this.defaultValue }
      this.$emit('defaultValue', location)
    },
    //   初始化地图页面
    initMap() {
      this.map = new AMap.Map('custom-amap', {
        resizeEnable: true,
        zoom: 50,
        mapStyle: 'amap://styles/macaron'
      })
      // 添加maker
      this.setMaker()
      // 添加定位
      this.addAMapGeolocation()
    },
    // 添加maker
    setMaker() {
      this.marker = new AMap.Marker()
      this.map.add(this.marker)
      // 添加解析地理位置插件
      this.map.plugin('AMap.Geocoder', () => {
        // 异步加载插件
        this.geocoder = new AMap.Geocoder({
          city: this.defaultCity, // 默认：“全国”
          radius: 1000 // 范围，默认：500
        })
      })
    },
    // 添加自动定位
    addAMapGeolocation() {
      this.map.plugin('AMap.Geolocation', () => {
        const geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(200, 200),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB'
        })
        // 获取当前位置
        geolocation.getCurrentPosition()
        // 添加定位当前城市成功监听
        AMap.event.addListener(
          geolocation,
          'complete',
          this.onCurrentPositionComplete
        )
      })
    },
    // 定位当前城市成功回调
    onCurrentPositionComplete(res) {
      // 添加maker
      this.setMaker()
      const lnglat = []
      if (lng == '' || lat == '') {
        lnglat = [res.position.lng, res.position.lat]
        this.defaultValue = res.formattedAddress
      } else {
        lnglat = [this.lng, this.lat]
        this.defaultValue = res.formattedAddress
      }
      this.marker.setPosition(lnglat)
    },
    // 搜索结果
    querySearch(queryString, cb) {
      search(queryString).then(res => {
        if (res.status == 200) {
          // 处理数据
          var searchData = []
          for (let i = 0; i < res.data.pois.length; i++) {
            const p = res.data.pois[i]
            searchData.push({
              value: p.name,
              name: p.address,
              location: p.location,
              provinceCode: p.pcode,
              provinceName: p.pname,
              cityCode: p.citycode,
              cityName: p.cityname,
              districtName: p.adname,
              districtCode: p.adcode
            })
          }
          cb(searchData)
        }
      })
    },
    // 选择之后通知地图更新坐标
    selectHandler(item) {
      this.map.plugin('AMap.PlaceSearch', () => {
        // 构造地点查询类
        this.placeSearch = new AMap.PlaceSearch({
          type: '', // 兴趣点类别
          pageSize: 1, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: this.defaultCity, // 兴趣点城市
          citylimit: false, // 是否强制限制在设置的城市内搜索
          map: this.map, // 展现结果的地图实例
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        this.$emit('getPosition', item)
        this.$emit('defaultValue', item.value)
        this.placeSearch.search(item.value)
      })
    },
    // 清除input里的值，清除搜索结果，再次初始化map
    handelclearInput() {
      document.querySelector('#searchResultPanel').innerHTML = ''
    }
  }
}
</script>

<style lang="scss">
#amap-container {
  .el-input__clear {
    line-height: 34px;
    // top: 20px;
  }

  #custom-amap {
    height: 175px;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ccc;
  }

  .input-with {
    z-index: 1;
  }

  .address {
    color: #373737;
  }
}

.amap-sug-result {
  z-index: 99999;
}

.amap-logo {
  display: none !important;
  visibility: hidden !important;
}

.amap-copyright {
  display: none !important;
  visibility: hidden !important;
}
</style>
